<template>
  <el-form label-width="90px" size="mini">
    <el-collapse value="1" class="customer-collapse">
      <el-collapse-item name="1" title="基础">
          <el-form-item label="显示" style="width: 100%">
            <el-switch v-model="attribute.tooltip.show" />
          </el-form-item>
          <formatter-option :data="attribute.tooltip"/>

        <el-form-item label="半径大小">
          <el-input-number v-model="attribute.series.radius" :min="50" :max="100"/>
        </el-form-item>
        <tm-group label="角度">
          <el-form-item label="开始角度">
            <el-input-number v-model="attribute.series.startAngle" :min="-360" :max="360"/>
          </el-form-item>
          <el-form-item label="结束角度">
            <el-input-number v-model="attribute.series.endAngle" :min="-360" :max="360"/>
          </el-form-item>
        </tm-group>
        <tm-group label="值区间">
          <el-form-item label="最小值">
            <el-input-number v-model="attribute.series.min" :min="0" />
          </el-form-item>
          <el-form-item label="最大值">
            <el-input-number v-model="attribute.series.max" :min="0" />
          </el-form-item>
          <el-form-item label="段数(splitNumber)" label-width="100%">
            <el-input-number v-model="attribute.series.splitNumber" :min="0" />
          </el-form-item>
        </tm-group>
      </el-collapse-item>

      <el-collapse-item title="进度">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.progress.show" />
        </el-form-item>
        <el-form-item label="是否圆角" >
          <el-switch v-model="attribute.series.progress.roundCap" />
        </el-form-item>
        <el-form-item label="宽度" >
          <el-input-number v-model="attribute.series.progress.width" />
        </el-form-item>
        <el-form-item label="背景色">
          <el-color-picker v-model="attribute.series.itemStyle.color" show-alpha />
        </el-form-item>
        <el-form-item label="边框颜色">
          <el-color-picker v-model="attribute.series.itemStyle.borderColor" show-alpha />
        </el-form-item>
        <el-form-item label="边框宽度">
          <el-input-number v-model="attribute.series.itemStyle.borderWidth" />
        </el-form-item>
        <shadow-option :data="attribute.series.itemStyle" />
      </el-collapse-item>

      <el-collapse-item name="3" title="仪表盘轴线-axisLine">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.axisLine.show" />
        </el-form-item>
        <el-form-item label="是否圆角" >
          <el-switch v-model="attribute.series.axisLine.roundCap" />
        </el-form-item>
        <el-form-item label="轴线宽度" >
          <el-input-number v-model="attribute.series.axisLine.lineStyle.width" />
        </el-form-item>
        <el-form-item label="轴线颜色">
          <tm-gauge-color v-model="attribute.series.axisLine.lineStyle.color"/>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item name="4" title="分割线-splitLine">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.splitLine.show" />
        </el-form-item>
        <el-form-item label="距离">
          <el-input-number v-model="attribute.series.splitLine.distance" />
        </el-form-item>
        <el-form-item label="长度">
          <el-input-number v-model="attribute.series.splitLine.length" :min="0" />
        </el-form-item>
        <el-form-item label="线条宽度">
          <el-input-number v-model="attribute.series.splitLine.lineStyle.width" :min="0" />
        </el-form-item>
        <el-form-item label="线条颜色">
          <el-color-picker v-model="attribute.series.splitLine.lineStyle.color" show-alpha />
        </el-form-item>
        <el-form-item label="线条类型">
          <tm-radio v-model="attribute.series.splitLine.lineStyle.type"  :data="borderTypes"/>
        </el-form-item>
        <el-form-item label="末端形状">
          <tm-radio v-model="attribute.series.splitLine.lineStyle.cap"  :data="capList"/>
        </el-form-item>
        <shadow-option :data="attribute.series.splitLine.lineStyle"/>
      </el-collapse-item>

      <el-collapse-item title="刻度-axisTick">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.axisTick.show" />
        </el-form-item>
        <el-form-item label="刻度数">
          <el-input-number v-model="attribute.series.axisTick.splitNumber" :min="0" />
        </el-form-item>
        <el-form-item label="距离">
          <el-input-number v-model="attribute.series.axisTick.distance" />
        </el-form-item>
        <el-form-item label="长度">
          <el-input-number v-model="attribute.series.axisTick.length" :min="0" />
        </el-form-item>
        <el-form-item label="线条宽度">
          <el-input-number v-model="attribute.series.axisTick.lineStyle.width" :min="0" />
        </el-form-item>
        <el-form-item label="线条颜色">
          <el-color-picker v-model="attribute.series.axisTick.lineStyle.color" show-alpha />
        </el-form-item>
        <el-form-item label="线条类型">
          <tm-radio v-model="attribute.series.axisTick.lineStyle.type"  :data="borderTypes"/>
        </el-form-item>
        <el-form-item label="末端形状">
          <tm-radio v-model="attribute.series.axisTick.lineStyle.cap"  :data="capList"/>
        </el-form-item>
        <shadow-option :data="attribute.series.axisTick.lineStyle"/>
      </el-collapse-item>

      <el-collapse-item title="刻度标签-axisLabel">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.axisLabel.show" />
        </el-form-item>
        <el-form-item label="距离">
          <el-input-number v-model="attribute.series.axisLabel.distance" />
        </el-form-item>
        <el-form-item label="旋转">
          <tm-radio v-model="attribute.series.axisLabel.rotate" :data="rotateList" />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-input-number v-model="attribute.series.axisLabel.fontSize"  />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="attribute.series.axisLabel.color" show-alpha />
        </el-form-item>
        <text-shadow-option :data="attribute.series.axisLabel" :show-opacity="false"/>
        <formatter-option :data="attribute.series.axisLabel" placeholder="{value}"/>
      </el-collapse-item>

      <el-collapse-item title="指针-pointer">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.pointer.show" />
        </el-form-item>
        <el-form-item label="长度">
          <el-input-number v-model="attribute.series.pointer.length" :min="0" :max="100"/>
        </el-form-item>
        <el-form-item label="宽度">
          <el-input-number v-model="attribute.series.pointer.width" :min="0" :max="100"/>
        </el-form-item>
        <el-form-item label="形状">
          <el-input v-model="attribute.series.pointer.icon" clearable/>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item title="标题">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.title.show" />
        </el-form-item>
        <tm-group label="位置">
          <el-form-item label="水平方向">
            <el-input v-model="attribute.series.title.offsetCenter[0]"/>
          </el-form-item>
          <el-form-item label="垂直方向">
            <el-input v-model="attribute.series.title.offsetCenter[1]"/>
          </el-form-item>
        </tm-group>
        <el-form-item label="文字大小">
          <el-input-number v-model="attribute.series.title.fontSize"  />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="attribute.series.title.color" show-alpha />
        </el-form-item>
        <text-shadow-option :data="attribute.series.title"/>
      </el-collapse-item>


      <el-collapse-item title="数据详情">
        <el-form-item label="显示" >
          <el-switch v-model="attribute.series.detail.show" />
        </el-form-item>
        <tm-group label="位置">
          <el-form-item label="水平方向">
            <el-input v-model="attribute.series.detail.offsetCenter[0]"/>
          </el-form-item>
          <el-form-item label="垂直方向">
            <el-input v-model="attribute.series.detail.offsetCenter[1]"/>
          </el-form-item>
        </tm-group>
        <el-form-item label="文字大小">
          <el-input-number v-model="attribute.series.detail.fontSize"  />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="attribute.series.detail.color" show-alpha />
        </el-form-item>
        <text-shadow-option :data="attribute.series.detail"/>
        <formatter-option :data="attribute.series.detail" placeholder="{value}"/>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import tmRadio from '@/package/components/tm-radio'
import tmGaugeColor from '@/package/components/tm-gauge-color'
import shadowOption from '../shadow-option'
import textShadowOption from '../text-shadow-option'
import formatterOption from '../formatter-option'

export default {
  name: 'bar01-option',
  cnName: 'bar01-option',
  components: {
    tmRadio,
    tmGaugeColor,
    shadowOption,
    textShadowOption,
    formatterOption
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      borderTypes: [
        {label: 'solid', value: 'solid'},
        {label: 'dashed', value: 'dashed'},
        {label: 'butt', value: 'butt'}
      ],
      capList: [
        {label: 'butt', value: 'butt'},
        {label: 'round', value: 'round'},
        {label: 'square', value: 'square'}
      ],
      rotateList: [
        {label: '无', value: 0},
        {label: '径向旋转', value: 'radial'},
        {label: '切向旋转', value: 'tangential'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
